<template>
	<view class="page">
		<u-icon :label="tipsLabel()" size="40rpx" :name="detail.state == 6 ? 'checkmark-circle' : 'clock'"
			label-size="40rpx" bold label-color="#222" />
		<u-text v-if="detail.state == 8" :text="`请在${$TimeFormat(detail.verify_expire_time)}前到店消费`" color="#979797"
			size="28rpx" line-height="80rpx" block />
		<view class="card ticket">
			<view class="sn-body">
				<u-image show-loading :show-menu-by-longpress="false" :src="domain + detail.goods.image" width="152rpx"
					height="152rpx" radius="20rpx" />
				<view class="sn-center">
					<view class="sn-center-top">{{ detail.goods.title || "-" }}</view>
					<u-text :text="`有效期：${$TimeFormat(
              detail.verify_expire_time,
              'yyyy-mm-dd hh:MM'
            )}`" color="#555" size="24rpx" />
					<u-text :text="`人数：${detail.goods.number || '-'}人`" color="#555" size="24rpx" />
				</view>
				<view class="price"> ￥{{ detail.goods.actual_payment || "-" }} </view>
			</view>
			<view class="qrcode">
				<uv-qrcode ref="uvqrcode1" size="400rpx" :value="
            detail.state == 8
              ? JSON.stringify({
                  id: detail.id,
                  codes: detail.verify_code,
                })
              : '请勿重复扫码'
          " :options="{
            foregroundColor: qrColor,
          }">
					<template v-slot:loading>
						<u-loading-icon text="加载中" vertical text-size="18" />
					</template>
				</uv-qrcode>
			</view>
			<view class="flex">
				<view>
					<u-text :text="`券码信息（${detail.goods.number || '-'}张可用）`" color="#222222" size="28rpx"
						line-height="50rpx" bold />
					<u-text :text="`${$TimeFormat(detail.verify_expire_time, 'yyyy-mm-dd hh:MM')}到期`" color="#555"
						size="28rpx" line-height="50rpx" />
				</view>
				<view>
					<view class="green" v-if="detail.state == 8" @click="handleRefund">
						申请退款
					</view>
				</view>
			</view>
			<u-gap height="15" />
			<u-row>
				<u-col span="8">
					<u-text :text="`· ${detail.activity.phone || '-'}`" color="#222" bold size="28rpx"
						line-height="50rpx" />
				</u-col>
				<u-col span="4">
					<u-text :text="statusLabel()" color="#3BA199" size="28rpx" align="right" line-height="50rpx" />
				</u-col>
			</u-row>
		</view>
		<view class="card">
			<Sub-title :label="detail.activity.shopname" padding="0" />
			<view style="margin: 20rpx 0">
				<u-icon :label="detail.activity.address || '-'" size="28rpx" name="map-fill" labelSize="28rpx"
					color="#1A98FC" labelColor="#979797" @click="handleMap" />
			</view>
			<u-icon :label="`联系我们 ${detail.activity.phone || '-'}`" size="28rpx" name="phone-fill" labelSize="28rpx"
				color="#2CB9A4" labelColor="#979797" @click="callPhone" />
		</view>
	</view>
</template>
<script>
	import config from "@/request/baseUrl.js";
	import {
		myActivityOrderDetail
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				domain: config.baseUrl,
				orderId: "", // 订单ID
				detail: {}, // 订单详情
				qrColor: "", // 二维码颜色
			};
		},
		onLoad(e) {
			this.orderId = e.id;
			this.getData();
		},
		methods: {
			// 预览图片
			preImage() {
				uni.previewImage({
					urls: [this.detail.qrCode],
				});
			},
			// 申请退款
			handleRefund() {
				let order = {
					order_id: this.detail.id,
					goods_id: this.detail.goods.id,
					money: this.detail.goods.actual_payment,
					virtual_coin: this.detail.goods.virtual_coin,
					pay_type: this.detail.pay.pay_type,
				};
				uni.navigateTo({
					url: `/pages/my/myRefund?data=${JSON.stringify(order)}`
				});
			},
			// 活动状态
			statusLabel() {
				let v = this.detail.state;
				if (v == -2) {
					this.qrColor = "#a5a5a5";
					return "交易关闭";
				} else if (v == 1) {
					this.qrColor = "#a5a5a5";
					return "待付款";
				} else if (v == 8) {
					this.qrColor = "#000";
					return "待消费";
				} else if (v == 6) {
					this.qrColor = "#a5a5a5";
					return "已完成";
				} else {
					this.qrColor = "#a5a5a5";
					return "已取消";
				}
			},
			// 状态提示
			tipsLabel() {
				let v = this.detail.state;
				if (v == 1) return "待付款";
				else if (v == 8) return "待到店使用";
				else if (v == 6) return "消费完成";
				else if (v == 7) return "已取消";
				else return "已申请退款";
			},
			// 获取订单详情
			getData() {
				myActivityOrderDetail(this.orderId).then((res) => {
					if (res.code == 1) {
						this.detail = res.data;
					}
				});
			},
			// 地图
			handleMap() {
				// let result = this.$store.dispatch("permission/requestPermissions",
				// 	'ACCESS_FINE_LOCATION')
				// if (result !== 1) return
				const {
					lat,
					lng,
					address
				} = this.detail.activity;
				// uni.openLocation({
				//   latitude: lat,
				//   longitude: lng,
				//   address: address,
				//   scale: 16,
				// });
				uni.navigateTo({
					url: `/pages/parse/map?lat=${lat}&lng=${lng}`
				});
			},
			// 拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.activity.phone,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page {
		padding: 20rpx;
		background-color: #fbfbfb;
		min-height: calc(100vh - 88rpx);

		.card {
			padding: 30rpx;
			margin: 20rpx 0 40rpx 0;
			box-shadow: 0 0 20rpx rgba(218, 218, 218, 0.4);
			border-radius: 20rpx;

			.sn-body {
				display: flex;
				padding-bottom: 44rpx;
				border-bottom: 1rpx dashed #3ba19980;

				.sn-center {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					min-height: 116rpx;
					margin-left: 20rpx;

					&-top {
						width: 380rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #222;
						line-height: 40rpx;
						word-break: break-all;
						padding-bottom: 16rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.price {
					position: absolute;
					top: 22rpx;
					right: 30rpx;
					color: #222222;
					font-weight: 600;
					font-size: 40rpx;
					background-color: #fff;
				}
			}

			.qrcode {
				display: flex;
				justify-content: center;
				padding: 62rpx;
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx dashed #3ba19980;
			}

			.green {
				display: inline-block;
				height: 56rpx;
				width: 160rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 28rpx;
				border-radius: 40rpx;
				color: $active-color;
				background-color: #cee7e5;

				&:active {
					background-color: #c2dcda;
				}
			}
		}

		.ticket {
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 200rpx;
				left: -22rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				background-color: #f9f9f9;
			}

			&::after {
				content: "";
				position: absolute;
				top: 200rpx;
				right: -22rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				background-color: #f9f9f9;
			}
		}
	}
</style>